<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房车预约订单</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .fenye {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
        }

        .search {
            width: 200px;
        }

        .header {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="header">
        <el-input class="search" placeholder="请输入营地名：" clearable suffix-icon="el-icon-search"
                  v-model="campName"></el-input>
        <el-input class="search" type="date" placeholder="入住时间" clearable v-model="startTime"></el-input>
        <el-input class="search" type="date" placeholder="离店时间" clearable v-model="endTime"></el-input>
        <el-button type="primary" @click="selectAppointment()">查询</el-button>
    </div>

    <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{prop: 'appId', order: 'descending'}">
        <el-table-column
                prop="appId"
                label="订单编号"
                sortable
                width="100">
        </el-table-column>
        <el-table-column
                prop="campName"
                label="营地名"
                sortable
                width="180">
        </el-table-column>
        <el-table-column
                prop="carName"
                label="房车名">
        </el-table-column>
        <el-table-column
                prop="userName"
                label="用户名">
        </el-table-column>
        <el-table-column
                prop="startTime"
                sortable
                label="入住时间">
        </el-table-column>
        <el-table-column
                prop="endTime"
                sortable
                label="离店时间">
        </el-table-column>
        <el-table-column
                prop="days"
                sortable
                label="入住天数">
        </el-table-column>
        <el-table-column
                prop="total"
                sortable
                label="总计">
        </el-table-column>
        <el-table-column
                prop="status"
                label="订单状态">
        </el-table-column>
    </el-table>
    <!--分页-->
    <div class="fenye">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageIndex"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.dataCount">
        </el-pagination>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#div",
        data: {
            campName: '',
            startTime: '',
            endTime: '',
            //定义集合存储营地信息
            tableData: [],
            page: {
                pageIndex: 1,
                number: 2,
                pageCount: null,
                dataCount: null
            }
        },
        created: function () {
            this.selectAppointment();
        },
        methods: {
            //查询所有订单
            selectAppointment() {
                var _this = this;
                $.ajax({
                    url: "/appointment/selectAppointment",
                    type: "get",
                    data: {
                        "index": _this.page.pageIndex,
                        "number": _this.page.number,
                        "campName": _this.campName,
                        "startTime": _this.startTime,
                        "endTime": _this.endTime
                    },
                    dataType: "json",
                    success: function (data) {
                        _this.tableData = data.list;
                        for (var i = 0; i < _this.tableData.length; i++) {
                            if (_this.tableData[i].status == 1) {
                                _this.tableData[i].status = '已预约';
                                continue;
                            }
                            if (_this.tableData[i].status == 2) {
                                _this.tableData[i].status = '待支付';
                                continue;
                            }
                            if (_this.tableData[i].status == 3) {
                                _this.tableData[i].status = '已支付';
                                continue;
                            }
                            if (_this.tableData[i].status == 4) {
                                _this.tableData[i].status = '已完成';
                                continue;
                            }
                            if (_this.tableData[i].status == 0) {
                                _this.tableData[i].status = '已完成';
                                continue;
                            }
                        }
                        _this.page.pageIndex = data.obj.pageIndex;
                        _this.page.number = data.obj.number;
                        _this.page.pageCount = data.obj.pageCount;
                        _this.page.dataCount = data.obj.count;
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            },
            handleEdit: function (index, row) {
                this.updateCarInfo = row;
                this.updateDialogVisible = true;
            },
            handleDelete: function (index, row) {
                this.open(row);
            },
            //分页
            handleSizeChange(val) {
                this.page.number = val;
                this.selectAppointment();
            },
            handleCurrentChange(val) {
                this.page.pageIndex = val;
                this.selectAppointment();
            }

        }
    })
</script>
</body>
</html>